<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>File upload</title>
    <style>
        body {
            background-image: url("img/Background_picture.jpeg");
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;
            text-align:center;
        }
        #div1{
            width: 600px;
            height: 300px;
            margin: 10% auto auto auto;
            background-color: white;
            border: 5px #bfbfbf solid;
            opacity:90%;
        }

        table{
            width: 100%;
            padding-top: 15%;
        }
        tr{
            text-align:center;
        }
        td{

            height: 70px;
        }
    </style>
    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/spark-md5.js"></script>
</head>
<body>
    <div id="div1">
        <form id="from" method="post" action="/upload" enctype="multipart/form-data">
            <table>
                <tr>
                    <td>
                        <input type="hidden" id="size" name="size">
                        <input type="hidden" id="md5" name="md5">
                        <input id="file" name="upload" type="file">
                        <input id="submit" type="submit" value="上传">
                    </td>
                </tr>
            </table>
        </form>
    </div>
</body>
</html>

<script>
    //注意此方法引用了SparkMD5库 library:https://github.com/satazor/SparkMD5
    //监听文本框变化
    document.getElementById("file").addEventListener("change", function() {
        //声明必要的变量
        chunks=0;
        currentChunk=0;
        var fileReader = new FileReader();//一个用来读取文件的对象
        //文件分割方法（注意兼容性）
        blobSlice = File.prototype.mozSlice || File.prototype.webkitSlice || File.prototype.slice,
            file = document.getElementById("file").files[0],
            //文件每块分割2M，计算分割详情
            chunkSize = 2097152,
            chunks = Math.ceil(file.size / chunkSize),
            currentChunk = 0,

            //创建md5对象（基于SparkMD5）
            spark = new SparkMD5();

        //每块文件读取完毕之后的处理
        fileReader.onload = function(e) {
            console.log("读取文件", currentChunk + 1, "/", chunks);
            //每块交由sparkMD5进行计算
            spark.appendBinary(e.target.result);
            currentChunk++;
            //如果文件处理完成计算MD5，如果还有分片继续处理
            if (currentChunk < chunks) {
                loadNext();
            } else {
                md5=spark.end();
                document.getElementById("md5").value=md5;
                document.getElementById("size").value=file.size;

                $.ajax({
                    type:"GET",//请求方式为get或者post
                    url:"/md5Check",//请求的url(一般为后台接口)
                    data:{"md5":md5},//发送到服务器的参数
                    dataType:"json",//服务器响应的数据类型
                    success:function(data) { //请求成功后返回的数据，赋值给变量'data'
                        //对data进行操作 
                        if (data.msg){
                            alert("文件上传成功,校验码为:"+md5);
                            $('#button').prop("type","button");
                        }else{alert("点击上传");}

                    }
                });
            }
        };

        //处理单片文件的上传
        function loadNext() {
            var start = currentChunk * chunkSize,
                end = start + chunkSize >= file.size ? file.size : start + chunkSize;
            fileReader.readAsBinaryString(blobSlice.call(file, start, end));
        }
        loadNext();
    });
</script>



